<template>
    <div class="page-content">
        <el-card class="box-card">

            <!-- header begin -->
            <Header 
            :searchParameter_type_date="searchParameter_type_date"
            @tableDataChange="tableDataChange"
            @refreshTable="refreshTable"
            >
            </Header>
            <!-- header end -->

            <!-- table begin -->
            <Table 
            :tableData="tableData" 
            :searchParameter="searchParameter"
            @tableDataChange="tableDataChange"
            @refreshTable="refreshTable" 
            >
            </Table>
            <!-- table end -->

            <!-- bottom begin -->
            <div class="bottom_style">

                <!-- pagination begin -->
                <div>
                  <Pagination 
                  :total="sum"
                  :pageNum="getCertificateParameter.page"
                  :pageSize="getCertificateParameter.size"
                  @getAllInfo="pageOrSizeChange"
                  >
                  </Pagination>
                </div>
                <!-- pagination end -->

                <!-- export excel begin -->
                <div class="button_right flex_center">
                    <el-button 
                    type="primary" 
                    class="el-button--small"
                    @click="download"
                    v-auth="'breed_warn_select'"
                    >导出为EXCEL
                    
                    </el-button>
                </div>
                <!-- export excel end -->
            </div>
            <!-- bottom end -->
        </el-card>
    </div>
</template>

<script>

// API
import { 
  getCertificate,
  exportToExcel
} from "../../Api/productionmanage/warning/supplierWarning"

// ComPonent
import Pagination from '../../components/ProcessingPlantManagement/public/pagination.vue'
import Table from "../../components/ProductionManagement/warning/supplierWarning/Table"
import Header from "../../components/ProductionManagement/warning/supplierWarning/Header"
import { mapState } from 'vuex'

export default {
    name: 'SupplierWarning',

    components: {
      Header, // 包括下拉菜单和三个按钮
      Table,
      Pagination    
    },

    computed: mapState( 'supplierWarnData', ['searchWay'] ),

    watch: {
      'searchWay': {
        handler( newValue, oldValue ) {
          if ( newValue === 1 ) {
            this.getCertificateParameter.page = 1
            this.getCertificateParameter.size = 4

            if ( oldValue === 3 ) 
              this.searchParameter.keyWord = ""
          } 
          else if ( newValue === 2 ) {
            this.searchParameter_type_date = {
              page: 1,
              size: 4,
              nums: null,
              type: null
            }

            if ( oldValue === 3 ) 
              this.searchParameter.keyWord = ""
          }
          else {
            this.searchParameter.page = 1
            this.searchParameter.size = 4
          }
        }
      }
    },

    data() {
      return {
        searchParameter: {
          page: 1,
          size: 4,
          keyWord: ''
        },

        searchParameter_type_date: {
          page: 1,
          size: 4,
          nums: null,
          type: null
        },

        sum: null,

        // 表格数据  
        tableData: [],

        multipleSelection: [],

        getCertificateParameter: {
          page: 1,
          size: 4
        }
      }
    },

    created() {
      getCertificate( this.getCertificateParameter ).then( res => {
        console.log(this.$store);
        const { records : data } = res.data.data

        this.tableData = data
        this.sum = res.data.data.total
      } )
    },

    methods: {

      // 监听 header 组件 refresh
      async refreshTable() {
        const loading = this.$loading( {
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        } );

        const getCertificateParameter = {
          page: 1,
          size: 4
        }

        // 获取证书数据
        getCertificate( getCertificateParameter ).then( res => {
          if( res.data.flag == true ) {
            const { records : data } = res.data.data
            const { total : sum } = res.data.data

            this.sum = sum
            this.tableData = data
            this.$message( {
              type: 'success',
              message: '刷新成功'
            } )
          }
          else {
            this.$message( {
              type: 'error',
              message: '加载失败'
            } )
          }

          loading.close()
        } )

        // 更改分页获取数据方式
        if( this.$store.state.supplierWarnData.searchWay !== 1 ) 
          this.$store.commit( 'supplierWarnData/changeSearchWay', 1)
      },

      // 导出 excel 
      async download() {

        // 此处的字符串是堆 excel导出文件的命名
        exportToExcel( "供应商预警数据" ).then( res => {
          if( res.status == 200 ) {
            const url = res.config.baseURL + res.config.url

            window.location.href = url
          }
          else {
            this.$message( {
              message: '导出失败',
              type: 'error'
            } )
          }
        } )
      },

      // 监听 header 组件 tableData
      tableDataChange( data, sum ) {
        this.tableData = data
        this.sum = sum
      },

      // 获取证书数据
      getData( getCertificateParameter ) { 

        // 调用获取证书接口
        getCertificate( getCertificateParameter ).then( res => {
          const { records : data } = res.data.data
          const { total : sum } = res.data.data
          this.sum = sum
          this.tableData = data
        } )

        // 更改搜索状态
        if( this.$store.state.supplierWarnData.searchWay !== 1 ) 
          this.$store.commit('supplierWarnData/changeSearchWay',1)
      },

      // 分页组件变化
      pageOrSizeChange( size, page ) {

        // 根据 searchWay 判断调用那个接口来获取数据
        const searchWay = this.$store.state.supplierWarnData.searchWay
        console.log(searchWay,666,size,page);

        if( searchWay === 1 ) {
          console.log('进入if');

          if( this.getCertificateParameter.size != size ) 
            this.getCertificateParameter.size = size
          else
            this.getCertificateParameter.page = page
          this.getData(this.getCertificateParameter)
        }
        else {
          if( searchWay === 2 ) {

            if( this.getCertificateParameter.size != size ) 
              this.$set( this.searchParameter_type_date, "size", size )
            else
              this.$set( this.searchParameter_type_date, "page", page )
          }

          if( searchWay === 3 ) {

            if( this.getCertificateParameter.size != size ) 
              this.$set( this.searchParameter, "size", size)
            else
              this.$set( this.searchParameter, "page", page)
          }
        }
      },
    },
}
</script>

<style scoped lang="scss">

// 公共样式
.flex_center {
    display: flex;
    justify-content: center;
    align-items: center;
}

// 底部样式
.bottom_style {
    padding-top: 10px;
    .button_right {
        justify-content: flex-end;
    }
}
</style>